<%@page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<style type="text/css">
	.foot-wrap{
	background-color: #373f48;
	margin-top:80px;
	}
 .row-content{}
 .row-content h3{
 	color:#DDD;
	font-size:16px;
	font-weight: 300;
	line-height: 16px;
	margin:40px 0 30px 34px;
	}
 .row-content ul{
	font-size:13px;
	line-height:24px;
	}
 .row-content ul li{
 	list-style:none;
 	}
 .row-content ul li	 a{
		color:#878B91;
		}
 .row-content ul li a:hover{
	text-decoration:none;
	color:#c1ba62;
	}
 .social{
margin:0;
padding:0;
width:100%;
text-align:center;
}.social li{
	display:inline-block;
	}
	 .social a{
		display:inline-block;
		font-size:18px;
		line-height:30px;
		.square(30px);
		border-radius:36px;
		background-color:@gray-light;
		color:#fff;
		margin:0 3px 3px 0;
		&:hover{
		text-decoration:none;
		background-color:@link-hover-color;
		}

</style>
<!--采用container-fluid，使得整个页尾的宽度为100%，并设置它的背景色-->
<footer>
    <!--采用container，使得页尾内容居中 -->
        <div class="foot-wrap ">
            <div class="row-content col-xs-10 col-xs-offset-1">
                <div class="col-xs-2">
                    <h3>友情链接</h3>
                    <ul id="friendLink">
                        <!-- <li><a href="#">Newsletter</a></li> -->
                    </ul>
                </div>
                <div class="col-xs-2">
                    <h3>关于我们</h3>
                    <ul>
                        <li><a href="#">团队介绍</a></li>
                       <li><a href="#">平台理念</a></li>
                        <li><a href="#">轻松玩</a></li>
                       <li><a href="#">加入我们</a></li>
                       <!--   <li><a href="#">OPL Themes</a></li> -->
                    </ul>
                </div>
                <div class="col-xs-2">
                    <h3>联系我们</h3>
                    <ul>
                        <li><a href="#">QQ:501665620</a></li>
                         <li><a href="#">tjoker1234@outlook.com</a></li>
                        <!--<li><a href="#">OPL Blog</a></li>
                        <li><a href="#">Product Hunt</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">Submit</a></li>
                        <li><a href="#">Award Ribbons</a></li>
                        <li><a href="#">Roadmap</a></li> -->
                    </ul>
                </div>
                <div class="col-xs-2">
                    <h3>合作</h3>
                    <ul>
                        <li><a href="#">广告</a></li>
                        <li><a href="#">投资</a></li>
                       <!--  <li><a href="#">Development</a></li>
                        <li><a href="#">Hosting</a></li>
                        <li><a href="#">Round Ups</a></li>
                        <li><a href="#">Tutorials</a></li> -->
                    </ul>
                </div>
                <div class="col-xs-2">
                    <h3>传送门</h3>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">侵权申诉</a></li>
                        <li><a href="#">用户反馈</a></li>
                        <!-- <li><a href="#">Centrally Divided</a></li>
                        <li><a href="#">Skrollr.js</a></li>
                        <li><a href="#">Parallax Scrolling</a></li>
                        <li><a href="#">Off-Canvas Menu</a></li>
                        <li><a href="#">Molecules</a></li> -->
                    </ul>
                </div>
                <div class="col-xs-2">
                    <h3>其它</h3>
                    <ul>
                        <li><a href="#">轻松玩</a></li>
                        <li><a href="#">轻松玩news</a></li>
                       <!--  <li><a href="#">Clutterless</a></li>
                        <li><a href="#">Mapped</a></li> -->
                    </ul>
                </div class="col-xs-2">
            </div><!--/.row -->
             <div class="clearfix"></div>
        </div><!--/.container-->
        <!-- 社交图标列表，其中图标采用的是Font Awesome图标字体库-->
       
        <ul class="social">
            <li>
                <a href="#" title="Twitter Profile">
                    <span></span>
                </a>
            </li>
            <li>
                <a href="#" title="Facebook Page">
                    <span></span>
                </a>
            </li>
            <li>
                <a href="#" title="LinkedIn Profile">
                    <span></span>
                </a>
            </li>
            <li>
                <a href="#" title="Goole+ Profile">
                    <span></span>
                </a>
            </li>
            <li>
                <a href="#" title="Github Profile">
                    <span></span>
                </a>
            </li>
        </ul>
        <p align="center">
           Copyright &copy;2017 tool.easywan.info All Rights Reserved. <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17065960号</a>
        </p>
</footer>
   <script type="text/javascript">
$(function(){
	var url = "/getFriendLink.html";
	var params = {url:url,type:'post',data:{},dataType:'json',success:function(data){
		if(data.code == 0){
			//<!-- <li><a href="#">Newsletter</a></li> -->
			var linkContent = "";
			for(var i = 0; i < data.models.length; i++){
				var model = data.models[i];
				linkContent += '<li><a href="'+model.href+'">'+model.name+'</a></li>';
			}
			$("#friendLink").html(linkContent);
		}
	}};
	$.ajax(params);
});
</script>
    